Transition patterns 過渡效果

過渡動畫是連線應用介面或元素的短動畫，它可以讓使用者更直觀地理解應用的執行方式。

Container Transform 容器變換

用於元素展開顯示詳情，如卡片擴充套件為詳情頁。常用搭配：卡片、列表、圖片集、搜尋框、工作表、懸浮操作按鈕（FAB）和標籤

應用啟動時，卡片從一個小區域擴充套件至完整介面，增強視覺層次

1 Between Full-Screen Views 全屏檢視之間的轉換

圖片從網格檢視展開為全屏檢視
列表項展開為全屏訊息檢視
卡片搜尋框擴充套件為全屏詳情頁

2 Within a Screen 螢幕內部的轉換

搜尋框展開以提供更多輸入空間
FAB（浮動操作按鈕）展開為底部操作表單
音樂播放器的卡片展開，提供更豐富的互動介面

Forward and Backward 前進與後退

前進/後退過渡適用於層級跳轉。例如從收件箱進入訊息對話。

動畫方式：2 iOS：採用視差效果，即前景滑動速度快於背景，減少視覺疲勞。

1. 安卓系統在螢幕滑動時會使用淡入淡出效果。這減少了動態效果的量，因為螢幕不必滑動裝置的整個寬度。2. iOS 使用視差效果，這意味著背景的滑動速度比前景慢。這也減少了動態效果的量。

Forward and Backward 前進與後退

在 Android 裝置上，點選填充按鈕使用前進與後退過渡
在 iOS 裝置上，點選卡片（Card）使用前進與後退
在 Android 裝置上，點選搜尋圖示按鈕使用前進與後退過渡
在平板裝置上，點選列表項（List Item）使用前進與後退過渡

Lateral 橫向過渡

橫向過渡適用於同級內容，強調內容的並列關係。比如在內容庫的各個標籤頁之間滑動切換。

常用搭配：標籤頁、輪播圖和圖片庫

橫向過渡使用簡單的滑動動作，元素保持分組並同步移動，建立對等關係，同時支援手勢導航。

點選或滑動 Tab 元件時，使用橫向過渡
瀏覽照片相簿時，使用橫向過渡
在輪播元件（Carousel）中切換內容時，使用橫向過渡

Top Level 頂級

這種模式用於在應用程式的頂級目的地之間進行導航，就像在導航欄中點選一個目的地一樣。

常用搭配：導航欄、導航軌和導航抽屜

點選底部導航欄時，使用頂級過渡
在導航抽屜中點選專案時，使用頂級過渡
在導航軌道中切換頁面時，使用頂級過渡

Enter and Exit 進入與退出

這種模式用於元件在螢幕上的顯示和隱藏。元件可以在螢幕內部出現，如對話方塊；也可以從螢幕邊緣滑入滑出，如導航抽屜和底部工作表。

常用搭配：懸浮操作按鈕、對話方塊、選單、小吃欄（底部提示欄）、時間選擇器和工具提示

Within screen bounds 螢幕內

常用搭配：懸浮操作按鈕、對話方塊、選單、小吃欄（底部提示欄）、時間選擇器和工具提示

安卓元件沿 x/y 軸展開摺疊，避免縮放和 z 軸運動以符合 M3 高度模型。iOS 元件則採用縮放進入和漸隱退出。

1 Android：元件沿 x 或 y 軸展開和收起，避免使用縮放或 z 軸變化 2 iOS：元件保持大小不變，採用淡入淡出方式。

元件進入方向基於其位置：頂部選單向下展開，底部提示條向上展開。

頂部選單（Menu）從螢幕頂部向下展開
提示欄和 FAB 元件在進入和退出時使用動畫

Beyond screen bounds 超出螢幕

常用搭配：應用欄、橫幅、導航欄、導航軌、導航抽屜和工作表。安卓元件滑入滑出時沿x/y軸展開摺疊，強調形狀變化；而iOS元件則保持形狀不變。

1 iOS：元件直接滑動進出，不會改變形狀。2 Android：元件沿 x 或 y 軸滑動，強調形狀變化。

側面板可與主要內容共面進出，但會減少可用空間。

並排面板在同一層級展開和收起

元件可以透過滾動手勢從螢幕邊緣滑入滑出，這樣可以最大化可用的螢幕空間。。

頂欄（Top App Bar）在滾動時滑入和滑出
導航欄（Navigation Bar）在滾動時滑入和滑出

位置元件的進入和退出有助於建立應用程式的連貫空間模型：

1 通知欄從螢幕頂部進入，且支援下拉操作 2 導航抽屜從螢幕左側滑入3 底部面板和鍵盤從螢幕底部滑入

Skeleton loaders 骨架屏載入

這種模式用於從臨時載入狀態過渡到完全載入的使用者介面。

骨架載入器是介面的佔位符，預示內容載入後的位置佈局。它配合其他過渡效果，減少延遲感知並維持佈局穩定。

應用啟動後顯示骨架屏，指示內容正在載入

骨架屏採用脈衝動畫，表示載入進度，內容載入完成後，骨架屏淡出，實際內容漸顯

脈衝動畫表達不確定的載入狀態
內容一旦載入完成就會迅速淡入